<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clamp-Max-Min</title>
    <style>
      html {
        font-size: 20px;
      }
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        /* font-size: 30px; */
        /* width: 100%;*/
        height: 400px;
        width: min(1440px, 100%);
        background-color: #a3fd11;
      }
      .box1 {
        /* width: min(100px, 10vw, 10em);
        height: max(300px, 30vh, 30rem); */
        width: min(100px, 200px, 300px);
        height: max(100px, 200px, 300px);
        background-color: #000000;
      }
      p {
        font-size: clamp(20px, 10vw, 40px);
        color: #fc086e;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1">
        <p>Hello World</p>
      </div>
    </div>
  </body>
</html>
